<template>
  <div class="pages invoiceList">
    <div class="pageLevel" v-if="!sub">
      <!-- 操作框 -->
      <div class="tableSearch">
        <el-button type="primary" @click="routerPushAdd()" v-if='setRole("新增")' size="mini">新增</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px">
          <el-form-item label="" label-width="15px">
            <el-input style="width:210px" class="" v-model="selectdata.keyword" size="mini" placeholder="请输入销售出库单号"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="searchSelect" class="Button">搜索</el-button>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="showmore=!showmore">高级查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 高级查询 -->
      <div class="tableSearch" v-show="showmore">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="状态：" label-width="75px">
            <el-select size="mini" v-model="selectdata.selected" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="未收货" value="0"></el-option>
              <el-option label="已收货" value="1"></el-option>
              <el-option label="已退货" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="outCode" label="销售出库单号" align="center"></el-table-column>
          <el-table-column prop="orderDate" label="单据时间" align="center"></el-table-column>
          <el-table-column prop="shopName" label="客户名称" align="center"></el-table-column>
          <el-table-column prop="outAmount" label="总金额" align="center"></el-table-column>
          <!-- 6.24 应收应付的退货-->
         <el-table-column prop="outStatus" label="收货状态" align="center">
            <template slot-scope="scope">
              <span>{{saleReceivingsStatusArr[scope.row.outStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="saleCode" label="来源单号" align="center"></el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPushInfo(scope.row)" type="text" class="addDetail">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"></el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import s from "@/util/state";
import util from "@/util";
import { getRepertoryOutBoundListPage } from "@/api";
export default {
  computed: mapState(["sub", "merchantId", "power"]),
  components: {},
  data() {
    return {
      saleReceivingsStatusArr:s.saleReceivingsStatusArr,//发货状态
      selectdata: {
        selected: "",
        keyword: "",
      }, //表单数据
      tableData: [], //表格接收的数组
      totalItems: 0, //总条数
      pageSize: 20, //一页多少条数据
      currentPage: 1, //当前页
      showmore: false //高级查询的显示隐藏
    };
  },
  mounted() {
    // 获取表格数据调用
    this.tableGet(this.pageSize, "1");
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.tableGet(this.pageSize, "1");
        }
      },
      deep: true
    }
  },
  methods: {
    // tim(row) {
    //   return util.foryear(row.orderDate);
    // },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableGet(pageSize, pageNum) {
      if (this.selectdata.selected == "") {
        var data = {
          shopId: this.merchantId,
          outCode: this.selectdata.keyword,
          pageNum: pageNum,
          pageSize: pageSize,
          outType:"1"
        };
      } else {
        var data = {
          shopId: this.merchantId,
          outStatus: this.selectdata.selected,
          outCode: this.selectdata.keyword,
          pageNum: pageNum,
          pageSize: pageSize,
          outType:"1"
        };
      }
      getRepertoryOutBoundListPage(data).then(res => {
        this.totalItems = res.data.pageTotal;
        this.tableData = res.data.list;
      });
    },
    // 点击查询按钮
    searchSelect() {
      this.currentPage=1;
      this.tableGet(this.pageSize,this.currentPage);
    },
    // 路由
    routerPushAdd() {
      util.routerTo(
        "/order-center/sale-management/sale-invoiceList/sale-invoiceAdd"
      );
    },
    routerPushInfo(data) {
      util.routerTo(
        "/order-center/sale-management/sale-invoiceList/sale-invoiceLook",
        data
      );
    },
    //跳页
    toPage() {
      this.tableGet(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableGet(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableGet(this.pageSize, val);
    }
  }
};
</script>
